<template>
  <PublicPage :showHead="false">
    <view class="goodsEdit">
      <view class="goodsEditBox">
        <view class="fw6 fz-16 px32">详情图</view>
        <!-- 图片 -->
        <view class="upImgBox">
          <view v-for="(item,index) in oldImageList" :key="index" class="forBox">
            <view class="closeBox" @click="_removeFn(index)"></view>
            <image :src="item" mode="aspectFill" style="width:100%;height:100%;" />
          </view>
          <view class="forBox upImgBtn" @click="_upImgFn" v-if="oldImageList.length < 16">
            <icon class="iconfont icon-camera_fill2" />
          </view>
        </view> 
        <view class="viceColor fz-12 px32 u-p-t-16">单张图片宽度建议750-1242px，高度建议小于1546px；图片格式支持JPG/JEPG；大小2M以内；最多上传16张</view>
      </view>
    </view>

    <view class="fixedBottomBtn tc" @click="editConfig">编辑完成</view>
  </PublicPage>
</template> 

<script>
import publicPage from "@/components/publicPage/index.vue";
import { compressImg } from '@/components/ossutil/ossMult'

export default {
  components: {
    publicPage
  },
  onLoad(){
    const that = this
    const { html } = that.$store.state.editorObject
    console.log(html);
    if(html){
      if(html.substr(0, 1) == "["){ // 新数据，图片数组
        that.oldImageList = JSON.parse(html)
      }else{ // 老数据，富文本
        let regex = ''
        if(html.indexOf('data-local') !== -1){ // 真机临时路径存在于data-local
          regex = new RegExp(/<img [^>]*data-local=['"]([^'"]+)[^>]*>/gi); // /(?<=(src="))[^"]*?(?=")/ig 此正则ios不支持
        }else{
          regex = new RegExp(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi); // /(?<=(src="))[^"]*?(?=")/ig 此正则ios不支持
        }
        html.replace(regex, function (match, capture) {
          that.oldImageList.push(capture) // 所有图片路径，包括已上传
          return match
        })
      }
    }
  },
  data(){
    return {
      oldImageList: [], // 图片数组
      newImageList: [], // 新加的图片数组
    }
  },
  methods:{
    _upImgFn(){
      const that = this;
      const limitSize = 1024 * 1024 * 2 // 限制大小为2M
      uni.chooseImage({
        count: 9,
        success: function (res) {
          for (let index = 0; index < res.tempFiles.length; index++) {
            if(res.tempFiles[index].size <= limitSize){
              if(that.oldImageList.length < 16){
                that.oldImageList.push(res.tempFiles[index].path)
                that.newImageList.push(res.tempFiles[index].path) // 本次选择的图片，包括选择后撤销的
              }
            }else{
              uni.showToast({
                icon: "none",
                title: "限制上传图片大小为2M"
              })
            }
          }
        }, 
      });
    },
    _removeFn(index){
      this.oldImageList.splice(index,1)
    },
    // 编辑完成
    async editConfig(){
      const that = this
      if(that.oldImageList.length){ // 存在图片
        for (let i = 0; i < that.oldImageList.length; i++) {
          if(that.newImageList.includes(that.oldImageList[i])){ // 存在未上传的图片
            const data = await compressImg(that.oldImageList[i],375,that) // 上传
            that.oldImageList[i] = data.url // 替换未上传图片
          }
        }
      }

      that.$store.commit('SET_EDITOR_OBJECT', {html: that.oldImageList.length ? JSON.stringify(that.oldImageList) : "" })
      uni.hideLoading()
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.goodsEdit{
  height: calc(100% - 100rpx);
  padding: 32rpx;
  .goodsEditBox{
    padding: 32rpx 0;
    background-color: #FFF;
    border-radius: 16rpx;
    box-shadow: 0px 2px 12px rgba(150, 151, 153, 0.16);
    .upImgBox{
      display: flex;
      flex-wrap:wrap;
      padding-left: 12rpx;
      .forBox{
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        margin-left: 21rpx;
        margin-top: 16rpx;
        .closeBox{
          width: 28rpx;
          height: 28rpx;
          background-image: url('https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/error2_icon.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: absolute;
          right: 2rpx;
          top: 2rpx;
        }
      }
      .upImgBtn{
        background-color: #F7F8FA;
        text-align: center;
        .iconfont{
          color: #DADADA;;
          line-height: 140rpx;
        }
      }
    }
  }
}
</style>